<template>
<div class="region-left">
    <p>停车区域分布图</p>
    <div class="example">
        <div class="circle c-yjr"></div>
        <span>已接入</span>
        <div class="circle c-djr"></div>
        <span class="span1">待接入</span>       
    </div>
    <div class="left">
        <!-- 芙蓉区 -->
      <div>
        <p>芙蓉区</p>
        <div class="top-fy top"></div>
        <div class="bot">
          <div class="bot-left">
            <p>已接入</p>
            <p>117</p>
          </div>
          <div class="divide"></div>
          <div class="bot-right">
            <p>待接入</p>
            <p>303</p>
          </div>

        </div>
      </div>
      <!-- 开福区 -->
      <div>
        <p>开福区</p>
        <div class="top-kf top"></div>
        <div class="bot">
          <div class="bot-left">
            <p>已接入</p>
            <p>450</p>
          </div>
          <div class="divide"></div>
          <div class="bot-right">
            <p>待接入</p>
            <p>32</p>
          </div>
        </div>
      </div>
      <!-- 关心区 -->
      <div>
        <p>关心区</p>
        <div class="top-gx top"></div>
        <div class="bot">
          <div class="bot-left">
            <p>已接入</p>
            <p>132</p>
          </div>
          <div class="divide"></div>
          <div class="bot-right">
            <p>待接入</p>
            <p>420</p>
          </div>
        </div>
      </div>
      <!-- 雨花区 -->
      <div>
        <p>雨花区</p>
        <div class="top-yh top"></div>
        <div class="bot">
          <div class="bot-left">
            <p>已接入</p>
            <p>120</p>
          </div>
          <div class="divide"></div>
          <div class="bot-right">
            <p>待接入</p>
            <p>298</p>
          </div>
        </div>
      </div>
      <!-- 岳麋区 -->
      <div>
        <p>岳麋区</p>
        <div class="top-ym top"></div>
        <div class="bot">
          <div class="bot-left">
            <p>已接入</p>
            <p>347</p>
          </div>
          <div class="divide"></div>
          <div class="bot-right">
            <p>待接入</p>
            <p>213</p>
          </div>
        </div>
      </div>
      <!-- 其他地区 -->
      <div>
        <p>其他地区</p>
        <div class="top-qt top"></div>
        <div class="bot">
          <div class="bot-left">
            <p>已接入</p>
            <p>635</p>
          </div>
          <div class="divide"></div>
          <div class="bot-right">
            <p>待接入</p>
            <p>25</p>
          </div>
        </div>
      </div>
    </div>
   </div>
  
</template>

<script>
import * as  echarts from 'echarts'
export default {
    mounted() {
    this.initEcharts1()
    this.initEcharts2()
    this.initEcharts3()
    this.initEcharts4()
    this.initEcharts5()
    this.initEcharts6()
  },
    //饼图
    methods: {
    initEcharts1(){
        var myChart1 = echarts.init(document.getElementsByClassName('top-fy')[0])
        myChart1.setOption({
        tooltip: {
        trigger: 'item'
        },
        series: [
        {
        type: 'pie',
        radius: '90%',
        data: [
        { value: 303, name: '待接入' },
        { value: 117, name: '已接入' }
        ],
        emphasis: {
        itemStyle: {
          shadowBlur: 20,
          shadowOffsetX: 1,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
        },
        labelLine:{  //删除指示线
            show:false
        },
        label:{
            normal:{
                show:true,
                position:"inner",
                fontSize:10
            }
        }
    }
  ]
})
    },
    initEcharts2(){
        var myChart1 = echarts.init(document.getElementsByClassName('top-kf')[0])
        myChart1.setOption({
        tooltip: {
        trigger: 'item'
        },
        series: [
        {
        type: 'pie',
        radius: '90%',
        data: [
        { value: 32, name: '待接入' },
        { value: 450, name: '已接入' }
        ],
        emphasis: {
        itemStyle: {
          shadowBlur: 20,
          shadowOffsetX: 1,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
        },
        labelLine:{  //删除指示线
            show:false
        },
        label:{
            normal:{
                show:true,
                position:"inner",
                fontSize:10
            }
        }
    }
  ]
})
    },
    initEcharts3(){
        var myChart1 = echarts.init(document.getElementsByClassName('top-gx')[0])
        myChart1.setOption({
        tooltip: {
        trigger: 'item'
        },
        series: [
        {
        type: 'pie',
        radius: '90%',
        data: [
        { value: 420, name: '待接入' },
        { value: 132, name: '已接入' }
        ],
        emphasis: {
        itemStyle: {
          shadowBlur: 20,
          shadowOffsetX: 1,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
        },
        labelLine:{  //删除指示线
            show:false
        },
        label:{
            normal:{
                show:true,
                position:"inner",
                fontSize:10
            }
        }
    }
  ]
})
    },
    initEcharts4(){
        var myChart1 = echarts.init(document.getElementsByClassName('top-yh')[0])
        myChart1.setOption({
        tooltip: {
        trigger: 'item'
        },
        series: [
        {
        type: 'pie',
        radius: '90%',
        data: [
        { value: 298, name: '待接入' },
        { value: 120, name: '已接入' }
        ],
        emphasis: {
        itemStyle: {
          shadowBlur: 20,
          shadowOffsetX: 1,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
        },
        labelLine:{  //删除指示线
            show:false
        },
        label:{
            normal:{
                show:true,
                position:"inner",
                fontSize:10
            }
        }
    }
  ]
})
    },
    initEcharts5(){
        var myChart1 = echarts.init(document.getElementsByClassName('top-ym')[0])
        myChart1.setOption({
        tooltip: {
        trigger: 'item'
        },
        series: [
        {
        type: 'pie',
        radius: '90%',
        data: [
        { value:213, name: '待接入' },
        { value: 347, name: '已接入' }
        ],
        emphasis: {
        itemStyle: {
          shadowBlur: 20,
          shadowOffsetX: 1,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
        },
        labelLine:{  //删除指示线
            show:false
        },
        label:{
            normal:{
                show:true,
                position:"inner",
                fontSize:10
            }
        }
    }
  ]
})
    },
    initEcharts6(){
        var myChart1 = echarts.init(document.getElementsByClassName('top-qt')[0])
        myChart1.setOption({
        tooltip: {
        trigger: 'item'
        },
        series: [
        {
        type: 'pie',
        radius: '90%',
        data: [
        { value: 25, name: '待接入' },
        { value: 635, name: '已接入' }
        ],
        emphasis: {
        itemStyle: {
          shadowBlur: 20,
          shadowOffsetX: 1,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
        },
        labelLine:{  //删除指示线
            show:false
        },
        label:{
            normal:{
                show:true,
                position:"inner",
                fontSize:10
            }
        }
    }
  ]
})
    }
    },

}
</script>

<style lang="less" scoped>
div,p,span,li{
    box-sizing: border-box;
}
 .region-left{
    width: 846px;
    height: 280px;
     background: rgba(255,255,255,0.4);
    border-radius: 5px;
    padding: 16px 20px;
    margin-bottom: 20px;
    p{
     font-weight: bold;
    }
    .example{
        height: 50px;
        display: flex;
        align-items: top;//垂直居中
        justify-content: end;//水平居右
        .circle{
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background:#91CC75 ;
            margin-right: 16px;
        }
        span{
                font-size: 12px;
                margin-right: 22px;
                color: #91CC75;
            }
            .span1{
                font-size: 12px;
                color: #464498;
            }
        .c-djr{
            background:#464498;
        }
    }
    .left{
      display: flex;
      justify-content: space-between;
      div{
      width: 100px;
      height: 200px;
      margin-bottom: 16px;
      p{
        font-weight: 500;
        text-align: center;
        margin-bottom: 14px;
      }
      .top{
        width: 100px;
        height: 100px;
      }
      .bot{
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        .bot-left{
            p{
                font-size: 8px;
                color:#91CC75 ;
            }
        }
        .divide{
            width: 4px;
            height: 14px;
            margin-top: 14px;
            background: #322D8A;
        }
        .bot-right{
            p{
                font-size: 8px;
                color:#464498 ;
            }
        }
      }
    }
    }
    
  }
</style>